<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类列表</title>
    <#include "./common/header.ftl">
</head>
<body>
<div class="content-wrapper" style="display: flex">
    <div class="nav-wrapper" style="flex: 0 0 200px;width: 200px">
       <#include "./common/nav.ftl">
    </div>
    <div id="page-content-wrapper" style="flex: 1;margin-left: 20px;margin-top: 100px">
        <div class="col-md-12 column">
            <div style="display: inline-block;">
                <form action="/sell/admin/categorylistbyid?openid=${openid}" method="post"
                      style="float: left;display: inline-block; vertical-align: top;">
                    <input type="text" placeholder="请输入查询id" id="id" name="id" value="" class="btn btn-default">
                    <select id="sortCode" name="sortCode" class="btn btn-default">
                        <option value="2">按时间降序</option>
                        <option value="0">按id升序</option>
                        <option value="1">按类别升序</option>
                    </select>
                    <input type="submit" value="查询" id="selectById" class="btn btn-default">
                </form>
            </div>
            <div style="display: inline-block; float: right;">
                <form action="/sell/admin/categorylistbytime?openid=${openid}" method="post"
                      style="display: inline-block;margin-left: 10px; vertical-align: top;">
                <#if createTime??>
                    起始时间：<input type="date" id="createTime" name="createTime"
                                value=${createTime} class="btn btn-default">
                <#else>
                    起始时间：<input type="date" id="createTime" name="createTime" value="" class="btn btn-default">
                </#if>
                <#if endTime??>
                    截止时间：<input type="date" id="endTime" name="endTime" value=${endTime} class="btn btn-default">
                <#else>
                    截止时间：<input type="date" id="endTime" name="endTime" value="" class="btn btn-default">
                </#if>
                    <input type="submit" value="查询" class="btn btn-default">
                </form>
            </div>
            <div style="clear: both;"></div>
            <input type="button" value="点击增加商品类别" id="addCategory" style="margin-top: 20px;" class="btn btn-default"/>
            <table class="table" table-bordered style="margin-top: 20px">
                <tr>
                    <td>类目id</td>
                    <td>类目类别</td>
                    <td>类目名字</td>
                    <td>创建时间</td>
                    <td>修改时间</td>
                    <td colspan="2">操作</td>
                </tr>
                <#list page.content as category>
                    <tr class="success">
                        <td>${category.id}</td>
                        <td>${category.categoryType}</td>
                        <td>${category.categoryName}</td>
                        <td>${category.createTime}</td>
                        <td>${category.updateTime}</td>
                        <td><a class="deleteCategory">删除</a></td>
                        <td><a class="modify_button">修改</a></td>
                    </tr>
                </#list>
            </table>
            <ul class="pagination pull-right">
    <#if currentPage lt 1>
        <li class="disabled"><a href="#">上一页</a></li>
    <#else>
        <li><a href="?page=${currentPage}&size=${size}&openid=${openid}">上一页</a></li>
    </#if>
    <#if page.getTotalPages()<1>
        <#list 1.. as index>
            <#if currentPage+1 == index>
                <li class="disabled"><a href="#">${index}</a></li>
            <#else>
                <li><a href="?page=${index}&size=${size}&openid=${openid}">${index}</a></li>
            </#if>
        </#list>
    <#else>
        <#list 1..page.getTotalPages() as index>
            <#if currentPage+1 == index>
                <li class="disabled"><a href="#">${index}</a></li>
            <#else>
                <li><a href="?page=${index}&size=${size}&openid=${openid}">${index}</a></li>
            </#if>
        </#list>
    </#if>



    <#if currentPage+1 gte page.getTotalPages()>
        <li class="disabled"><a href="#">下一页</a></li>
    <#else>
        <li><a href="?page=${currentPage + 2}&size=${size}&openid=${openid}">下一页</a></li>
    </#if>
            </ul>
        </div>
    </div>
</div>
<div id="modal-container" class="modal" style="display: none">
    <div class="modal-dialog" id="categoryDialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">类别编辑</h4>
            </div>
            <div class="modal-body" style="padding: 50px 50px">
                <input id="categoryId" style="display: none" value="">
                <div class="input-group">
                    <span class="input-group-addon">名称：</span>
                    <input id="categoryName" type="text" value="" placeholder="请输入类型名称" class="form-control">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon">类型：</span>
                    <input id="categoryType" type="text" value="" placeholder="请输入类型值(数字)" class="form-control"
                           onkeyup="value=value.replace(/[^1234567890-]+/g,'')">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="commit">提交更改</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var sortCodeValue = "${sortCode}";
        console.log("sortCodeValue" + sortCodeValue);
        if (sortCodeValue == 1) {
            $("#sortCode").find("option[value='1']").attr("selected", true);
        } else if (sortCodeValue == 2 || sortCodeValue == null) {
            $("#sortCode").find("option[value='2']").attr("selected", true);
        } else if (sortCodeValue == 0) {
            $("#sortCode").find("option[value='0']").attr("selected", true);
        }
    });
    $(".modify_button").click(function () {
        var id = $(this).parent('td').parent('tr').children('td').eq(0).text();
        var type = $(this).parent('td').parent('tr').children('td').eq(1).text();
        var name = $(this).parent('td').parent('tr').children('td').eq(2).text();
        var modifyClass = document.getElementById('modal-container');
        modifyClass.setAttribute('style', 'display:block');
        var idClass = document.getElementById('categoryId');
        var nameClass = document.getElementById('categoryName');
        var typeClass = document.getElementById('categoryType');
        console.log(id);
        idClass.value = id;
        nameClass.value = name;
        typeClass.value = type;
    });
    $(".close").click(function () {
        var modifyClass = document.getElementById('modal-container');
        modifyClass.setAttribute('style', 'display:none');
    });
    $(".btn-default").click(function () {
        var modifyClass = document.getElementById('modal-container');
        modifyClass.setAttribute('style', 'display:none');
    });
    $("#commit").click(function () {
        var id = document.getElementById('categoryId').value;
        var name = document.getElementById('categoryName').value;
        var type = document.getElementById('categoryType').value;
        if (name == '') {
            alert("请输入类型名称");
        } else if (type == '') {
            alert('请输入类型值');
        } else {
            console.log(id + name + type);
            $.post('/sell/admin/categorysave?openid=${openid}',
                    {"id": id, "categoryName": name, "categoryType": type},
                    function (data) {
                        var tmp = $.parseJSON(data);
                        console.log(tmp);
                        if (tmp.msg === 3) {
                            alert("修改成功");
                        } else if (tmp.msg === 2) {
                            alert("修改失败");
                        } else if (tmp.msg === 1) {
                            alert("增加成功");
                        } else if (tmp.msg === 0) {
                            alert("增加失败");
                        }
                        var modifyClass = document.getElementById('modal-container');
                        modifyClass.setAttribute('style', 'display:none');
                        window.location.reload();
                    });
        }

    });
    $("#addCategory").click(function () {
        var modifyClass = document.getElementById('modal-container');
        modifyClass.setAttribute('style', 'display:block');
    });


    $(".deleteCategory").click(function () {
        var id = $(this).parent('td').parent('tr').children('td').eq(0).text();
        var r = confirm("确认删除？");
        if (r == true) {
            $.post("/sell/admin/categorydelete?openid=${openid}", {"id": id}, function (data) {
                var tmp = $.parseJSON(data);
                if (tmp.msg === 1) {
                    alert("删除成功!");
                } else {
                    alert("删除失败!");
                }
                window.location.reload();
            });
        }
    });
</script>

<style>
    body {
        position: relative;
        height: 1314px;
        width: 100%;
    }

    #modal-container {
        position: absolute;
        top: 0;
        background: rgba(7, 17, 27, 0.5);
        width: 100%;
        height: 100%;
    }
</style>
</body>
</html>